<template>
  <a-card size="small" class="card" :bordered="false" :hoverable="true">
    <!-- <BoxCard /> -->
    <div class="iframe-head">
      <div class="title">{{ iframeParams.title }}</div>
      <div class="button-list">
        <a-button type="primary" :icon="h(PoweroffOutlined)" @click="close">关闭</a-button>
      </div>
    </div>
    <div class="iframe-content">
      <iframe class="iframe" v-if="iframeParams.ipAddress" :src="`http://${iframeParams.ipAddress}:9998`" frameborder="0"></iframe>
    </div>
  </a-card>
</template>

<script setup>
  import { ref, onMounted, onUnmounted, watch, nextTick, h } from 'vue';
  import { PoweroffOutlined } from '@ant-design/icons-vue';
  const emit = defineEmits(['close']);

  const iframeParams = ref({
    title: '',
  });
  function open(row) {
    iframeParams.value = row;
    iframeParams.value.title = row.name;
    console.log('iframeParams: ', iframeParams.value);
  }

  function close() {
    emit('close');
  }

  defineExpose({
    open,
  });
</script>

<style scoped lang="less">
  .card {
    width: 100%;
    height: 100%;
    .iframe-head {
      height: 40px;
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ddd;
      .title {
        font-size: 20px;
        font-weight: 700;
      }
    }
    .iframe-content {
      height: calc(100% - 40px - 5px);
      .iframe {
        width: 100%;
        height: 100%;
      }
    }
  }
  ::v-deep .ant-card-body {
    height: 100%;
  }
</style>
